<template>
	<view class="content">
		<view v-if="!bigShow">
			<view class="logo_bg">
				<image class="logo" src="@/static/images/index/polz_top.png" :draggable="false"></image>
				<view class="exchange_kZNCYs">
					<view class="kZNCYs">
						<image src="@/static/images/index/exchange.png" alt=""
							style="width: 28rpx;height: 28rpx;vertical-align: middle;margin-right: 10rpx;" />
							<text @click="bigShow=true">切换大字版</text>
					</view>
				</view>
			</view>
			<view class="cCNWGk">
				<view class="active">
					<h2 style="padding-bottom: 10px;">权益激活</h2>
					<view class="fontcolor" style="padding-bottom: 4px;">请扫描权益卡激活码绑定权益<br></view>
					<view class="fontcolor">
						您也可以手动输入6位激活码绑定权益
					</view>
					<view class="activeCode">
						<span>激活码</span>
						<image style="width: 40rpx;height: 40rpx;vertical-align: middle;"
							src=""
							alt="" />
					</view>
					<view class="input">
						<span class="dGA-dgO">
							<input placeholder="请输入激活码激活" maxlength="6" v-model="inputValue" @input="changeInput">
						</span>
					</view>
					<button :disabled="disabled" :class="[!disabled? 'lhQqpS': 'sc-AxiKw']"
						@click="sendBtn">下一步</button>
				</view>
				<view class="step">
					<h2 style="line-height: 90rpx;">激活流程</h2>
					<image src="@/static/images/index/polz_step.png" :draggable="false"
						style="width: 94%;height: 150rpx;"></image>
				</view>
				<view class="explain">
					<h2 style="text-align: center;line-height: 90rpx;">激活说明</h2>
					<view class="fontcolor">1、输入激活码可激活对应的权益卡，激活成功后可在“个人中心-我的权益卡”中查看并使用权益</view>
					<view class="fontcolor">2、输入激活码时请注意区分字母O、C、D和数字0，I和1，B和8</view>
					<view class="fontcolor">3、发放的激活码存在有效期，过期后未激活则激活码作废</view>
					<view class="fontcolor">4、一个证件号码只能激活一张同类型的权益卡</view>
					<view class="fontcolor">5、一个激活码仅能激活一次，不可重复使用</view>
					<view class="fontcolor">6、若有其他问题，请联系客服热线400-806-7176</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view v-if="onpageshow==0" class="fConent">
				<view class="exchange_kZNCYs">
					<view class="kZNCYs">
						<image src="@/static/images/index/exchange.png" alt=""
							style="width: 40rpx;height: 40rpx;vertical-align: middle;margin-right: 10rpx;">
							<text @click="bigShow=false">切换标准版</text>
					</view>
				</view>
				<view class="imageTop">
					<image src="@/static/images/index/input_code.png" mode="" style="width: 100%;height: 220rpx;"
						@click="navNextCode"></image>
					<image src="@/static/images/index/scan_code.png" mode=""
						style="width: 50%;height: 400rpx;margin-top: 30rpx;"></image>
					<view style="display: inline-block;width: 50%;padding-left: 30rpx;margin-top: 30rpx;">
						<image src="@/static/images/index/consult_phone.png" mode=""
							style="width: 100%;height: 180rpx;"></image>
						<image src="@/static/images/index/view_instructions.png" mode=""
							style="width: 100%;height: 180rpx;margin-top: 30rpx;" @click="viewInstructions"></image>
					</view>
				</view>
				<view class="step">
					<h2 style="line-height: 90rpx;">激活流程</h2>
					<image src="@/static/images/index/polz_step.png" :draggable="false"
						style="width: 94%;height: 150rpx;"></image>
				</view>
			</view>
			<view v-else-if="onpageshow==1" class="bg-black">
				<view class="hdsIGN">
					<h3>输入6位激活码绑定权益</h3>
				</view>
				<view class="codeInput">
					<view style="margin-bottom: 20rpx;">激活码</view>
					<view class="input">
						<span class="dGA-dgO">
							<input placeholder="请输入激活码激活" maxlength="6" v-model="inputValue" @input="changeInput">
						</span>
					</view>
					<button :disabled="disabled" :class="[!disabled? 'lhQqpS': 'sc-AxiKw']"
						@click="sendBtn">下一步</button>
				</view>
				<button style="margin: 20rpx;" class="plainlk" plain @click="goback">返回上一步</button>
			</view>
			<view v-else-if="onpageshow==2" class="fConent">
				<view class="explain">
					<h2 style="text-align: center;line-height: 90rpx;">激活说明</h2>
					<view class="fontcolor">1、输入激活码可激活对应的权益卡，激活成功后可在“个人中心-我的权益卡”中查看并使用权益</view>
					<view class="fontcolor">2、输入激活码时请注意区分字母O、C、D和数字0，I和1，B和8</view>
					<view class="fontcolor">3、发放的激活码存在有效期，过期后未激活则激活码作废</view>
					<view class="fontcolor">4、一个证件号码只能激活一张同类型的权益卡</view>
					<view class="fontcolor">5、一个激活码仅能激活一次，不可重复使用</view>
					<view class="fontcolor">6、若有其他问题，请联系客服热线400-806-7176</view>
				</view>
				<view style="position: absolute;bottom: 0rpx;padding: 20rpx;width: 100%;background: #fff;">
					<button style="margin: 20rpx;" class="plainlk1" @click="goback">返回</button>
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="开始激活" title="重要提示"
				@confirm="dialogConfirm1" @close="dialogClose">
				<view class="tanchuang" style="text-indent: 24px;letter-spacing: 1px;">
					尊敬的用户，您正在激活
					「<span style="color: #4cd964;">{{this.company}}</span>」的「<span style="color: #4cd964;">{{this.product}}</span>」的{{this.quanyiType}}权益卡，
					确认无误后点击“开始激活”按钮，激活后信息无法更改。激活过程中，
					请注意保护个人信息和卡片安全，切勿随意透露给他人。
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="message1" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="激活失败"
				@confirm="dialogConfirm2" @close="dialogClose2">
				<view class="tanchuang" style="text-indent: 24px;letter-spacing: 1px;">
					激活失败,请检查激活码是否正确!
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ActivationCodeslist,
		meijuzhi
	} from "@/api/system/user"
	export default {
		data() {
			return {
				bigShow: false,
				disabled: true,
				inputValue: '',
				onpageshow: 0,
				popupContent: '',
				type: 'center',
				msgType: 'success',
				product: "",
				company: "",
				quanyiType:""
			}
		},
		onLoad: function() {},
		methods: {
			dialogClose() {
				this.$refs.message.close()
			},
			dialogConfirm1() {
				uni.navigateTo({
					url: `/pages/code/personCode?activationCode=${this.inputValue}`
				});
			},
			dialogConfirm2(){
				this.$refs.message1.close()
			},
			dialogClose2() {
				this.$refs.message1.close()
			},
			goback() {
				this.bigShow = true
				this.onpageshow = 0
			},
			viewInstructions() {
				this.bigShow = true
				this.onpageshow = 2
			},
			navNextCode() {
				this.bigShow = true
				this.onpageshow = 1
			},
			changeInput() {
				console.log(this.inputValue, this.inputValue.length, 'changeInput')
				if (this.inputValue.length >= 6) {
					this.disabled = false
				} else {
					this.disabled = true
				}
			},
			dialogConfirm: async function() {
				this.$refs.message.open()
				//配置产品和公司 正在激活XXX产品XXX公司的
				console.log('sfnee',this.quanyiType)
				this.popupContent = `尊敬的用户，您正在激活${this.company}的${this.product}的权益卡，确认无误后点击“开始激活”按钮，激活后信息无法更改。激活过程中，请注意保护个人信息和卡片安全，切勿随意透露给他人。`
			},
			document_type1(){
				meijuzhi('compny_name').then(res=>{
					console.log(res)
					res.data.forEach(it=>{
						if(this.company == it.dictValue){
							this.company = it.dictLabel
						}
					})
				})
				this.document_type()
			},
			document_type(){
				meijuzhi('product_name').then(res=>{
					res.data.forEach(it=>{
						if(this.product == it.dictValue){
							this.product = it.dictLabel
						}
					})
				})
				this.dialogConfirm(this.product,this.company)
			},
			sendBtn() {
				console.log(this.inputValue, 'sendBtn')
				ActivationCodeslist(this.inputValue).then(response => {
					// console.log(response.rows[0].number, '家庭版')
					if (response.rows.length == 0) {
						// this.$modal.msgError("激活失败!请检查激活码是否正确！")
						this.$refs.message1.open()
					} else {
						//说明没有激活
						//需要把这个json存起来
						uni.setStorageSync('ActivationCodeslist',response.rows[0])
						this.quanyiType = response.rows[0].number == 2?'家庭版':'个人版'
						console.log(this.quanyiType)
						if ((response.rows[0].activationTime == null && response.rows[0].activatedBy == null) || response.rows[0].number == 2) {
							this.product = response.rows[0].product
							this.company = response.rows[0].company
							this.document_type1()
						} else {
							if(response.rows[0].activatedBy == uni.getStorageSync('phone')){
								//说明该激活码已经激活了
								uni.navigateTo({
									url: `/pages/code/personStatus?data=${JSON.stringify(response.rows[0])}`
								});
							} else {
								//激活的手机号不一致
								uni.showToast({
									title: '该激活码已被激活',
									icon: 'error'
								});
								uni.navigateTo({
									url: `/pages/code/personStatus?data=${JSON.stringify(response.rows[0])}`
								});
							}
						}
					}
				})

			}
		}
	}
</script>

<style>
	.bg-black {
		background: #fff;
		height: 100vh;
		width: 100%;
		color: #000;
	}

	.bg-black .codeInput {
		padding: 20rpx;
		padding-bottom: 40rpx;
	}

	.bg-black .input>span {
		height: 4rem;
		border: none;
	}

	.bg-black .input>span>input {
		height: 100%;
		border-radius: 0.8rem;
		border: 1px solid rgb(18, 205, 159);
		text-align: left;
		padding-left: 20rpx;
	}

	.bg-black .input {
		position: relative;
		margin-bottom: 200rpx;
	}

	.hdsIGN {
		background: rgb(255, 255, 255);
		font-size: 0.8rem;
		padding: 0px 1.2rem;
	}

	.hdsIGN>h3::before {
		content: "";
		position: absolute;
		background: rgb(18, 205, 159);
		width: 0.2222em;
		height: calc(100% - 2.1667em);
		top: 1.1em;
		left: -0.6667em;
	}

	.hdsIGN>h3 {
		margin: 0px;
		font-size: 30rpx;
		padding: 0.8333em 0px;
		position: relative;
		color: rgba(0, 0, 0, 0.8);
	}

	h3 {
		font-size: 32rpx;
		font-weight: bold;
	}

	.explain {
		padding: 16px;
		letter-spacing: 1px;
		text-align: left;
	}

	.step {
		margin-top: 1.6rem;
		text-align: center;
	}

	.fontcolor {
		color: rgb(153, 153, 153);
		line-height: 24px;
	}

	.fontcolor1 {
		color: rgb(102, 102, 102);
	}

	.cCNWGk .active .input>span {
		height: 3rem;
		border: none;
	}

	.cCNWGk .active .input>span>input {
		height: 100%;
		border-radius: 0.8rem;
		border: 1px solid rgb(18, 205, 159);
		text-align: left;
		padding-left: 20rpx;
	}

	.dGA-dgO {
		width: 100%;
		display: table;
		border: 1px solid rgba(0, 0, 0, 0.15);
	}

	.cCNWGk .active .input {
		position: relative;
	}

	.fConent {
		width: 100%;
		height: 100vh;
		background: linear-gradient(rgba(145, 240, 255, 0.21) 0%, rgba(145, 240, 255, 0.1) 100%);
		overflow-x: hidden;
	}

	.fConent .imageTop {
		margin: 160rpx 40rpx 80rpx 40rpx;
	}

	.content {
		width: 100%;
		overflow-x: hidden;
	}

	.logo {
		height: 330rpx;
		width: 95%;
		margin: 140rpx 20rpx 50rpx 20rpx;
		overflow-clip-margin: content-box;
		overflow: clip;
	}

	.logo_bg {
		background: url('../static/images/index/polz_top_bg.png') center center / cover no-repeat;
		font-size: 0.8rem;
	}

	.kZNCYs {
		font-size: 1rem;
		cursor: pointer;
		display: inline-block;
		background: rgb(255, 255, 255);
		padding: 0.25em 0.75em;
		border-radius: 0px 0.875em 0.875em 0px;
		color: rgb(102, 102, 102);
	}

	.exchange_kZNCYs {
		position: absolute;
		left: 0%;
		top: 56rpx;
	}

	.cCNWGk {
		text-align: center;
	}

	.cCNWGk .active {
		margin-top: -1.5rem;
		border-radius: 1.6rem;
		background: rgb(255, 255, 255);
		padding: 1rem 1.2rem;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 19px 0px;
	}

	.cCNWGk .active>button {
		width: 100%;
		height: 3.4rem;
		font-size: 1rem;
		border-radius: 0.8rem;
		margin-top: 1rem;
		line-height: 3.4rem;
	}

	.cCNWGk .active .activeCode {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		justify-content: space-between;
		margin: 1.2rem 0px;
	}

	uni-button[disabled]:not([type]),
	uni-button[disabled][type=default] {
		opacity: 0.6;
		border-color: transparent;
		background: rgb(41, 197, 136);
		color: rgb(255, 255, 255);
	}

	.plainlk {
		border-color: rgb(41, 197, 136);
		color: rgb(41, 197, 136);
	}

	.plainlk1 {
		border-color: transparent;
		background: rgb(41, 197, 136);
		color: rgb(255, 255, 255);
	}

	.sc-AxiKw {
		opacity: 0.6;
		background: rgb(41, 197, 136);
		color: rgb(255, 255, 255);
	}

	.lhQqpS {
		cursor: not-allowed;
		outline: none;
		border-radius: 2rpx;
		padding: 4rpx 1em;
		min-height: 10rpx;
		min-width: 10rpx;
		border: none;
		background: rgb(41, 197, 136);
		color: rgb(255, 255, 255);
	}
</style>